<template>
  <el-carousel :interval="4000" type="card" height="230px">
    <el-carousel-item v-for="item in imgs" :key="item.key">
      <img :src="item.src" alt="">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
    name: 'Carousel',
    data() {
        return {
            imgs:[
                {
                    src:'http://p1.music.126.net/Kz57-pdaoiQ2um5DEgzNUA==/109951167348383863.jpg',
                    key: 1
                },
                {
                    src:'http://p1.music.126.net/4ZIDarJmpCPmXbtfmJj4aA==/109951167348389275.jpg',
                    key: 2
                },
                {
                    src:'http://p1.music.126.net/CTPXVaOHT_FdnD8uhDHl6A==/109951167348406032.jpg',
                    key: 3
                },
                {
                    src:'http://p1.music.126.net/AF1nAe0uwd_28-R3pacy0Q==/109951167348405804.jpg',
                    key: 4
                }
                ,{
                    src:'http://p1.music.126.net/l0qtDk_2qEjsaS6lEQWEaw==/109951167348439311.jpg',
                    key:5
                }
                ]
        }
    },

}
</script>

<style>
.el-carousel{
    width: 1000px;
}
.el-carousel__item{
    border-radius: 15px;
    overflow: hidden;
}
  .el-carousel__item img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 15px;
  }

</style>